﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <title>每日排行榜</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .header {
            position: relative;
            background: #333;
            color: #fff;
            padding: 20px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }
        .container {
            height: 100%;
            width: 100%;
            position: fixed;
            text-align: center;
        }
        .header__headimgurl {
            min-width: 60px;
            width: 60px;
            height: 60px;
            background: #eee;
            border-radius: 50%;
        }

        .header__info {
            -webkit-flex: 1;
            flex: 1;
            padding-left: 20px;
        }

        .header__nickname {
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .btn__box .weui-btn {
            margin-top: 0;
        }
    </style>


</head>

<body>
<div class="container">
    <div id="mescroll" class="mescroll">
        <div>
            <div id="tap">

            </div>
        </div>
    </div>
</div>
<input id="platform" type="hidden" th:value="${platform}">

</body>
</html>
<script>
    var platform = $('#platform').val();
    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            //auto: false,
            isLock:true
            //callback: upCallback, //上拉加载的回调

        }
    });

    //下拉刷新的回调
    function downCallback() {
        $.get("/rankingList", {
            'platform': platform
        }, function (data) {
            if(data.code=='200'){
                $("#tap").html("");
                $("#tap").append('<div class="header">' +
                    '                    <div class="header__info">' +
                    '                        <div class="header__nickname">每日邀请排行</div>' +
                    '                    </div>' +
                    '                </div>');
                var id = 0;
                for (var i = 0; i < data.data.length; i++) {
                    id = id + 1;
                    $("#tap").append('<div class="header">' +
                        '                    <div style="width: 10%"><span>'+id+'</span></div>' +
                        '                    <img class="header__headimgurl" src="'+data.data[i].headimgurl+'" alt="">' +
                        '                    <div class="header__info">' +
                        '                        <div class="header__nickname">'+data.data[i].nickname+'</div>' +
                        '                    </div>' +
                        '                    <div class="header__info">' +
                        '                        <div class="header__nickname">'+data.data[i].number+'</div>' +
                        '                    </div>' +
                        '                </div>')
                }
                mescroll.endSuccess();
            }else{
                alert(data.msg)
            }
        })
    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {

    }
</script>
